<template>
	<section>
		<h3 class="h3-component">
			<span class="h3">最热</span>
		</h3>
		<div class="video-card-box">
			<el-carousel indicator-position="outside" :autoplay="false" height="160px">
				<el-carousel-item class="hot-video" v-for="(item,index) in res_data" :key="index" >
					<!-- video-card -->
					<div class="video-card" v-for="card in item" :key="card.aid">
						<div class="video-card-width">
							<router-link class="video-link" :to="{path: `${card.menu_id}/${card.aid}`}" target="_blank">
								<div class="video-img">
									<img :src="imgBaseUrl+card.pic" alt="" />
								</div>
								<div class="video-info">
									<div class="video-info-bg"></div>
									<div class="video-info-zindex">
										<div class="video-title">{{card.title}}</div>
										<div class="video-from">
											<span :class="`icon-from icon-from-${card.pub_platform}`"></span>
											<span class="minutes">{{ card.minute }}</span>
										</div>
									</div>
								</div>
							</router-link>
							<div class="video-click">
								<span :class="card.storeClass" @click="storeFn(item,card)">{{card.store_num}}</span>
								<span :class="card.good" @click="goodFn(item,card)">{{card.good_num}}</span>
							</div>
						</div>
					</div>
					<!-- video-card -->
				</el-carousel-item>
			</el-carousel>
		</div>
	</section>
</template>

<script>
import { getmenuhotvideo, updategood, storefrontAdd, imgBaseUrl } from '@/api';
import { utilStore, utilGood } from '@/util/util'
import { mapState, mapMutations } from 'vuex'

export default {
	data () {
		return {
			// 界面展示
			res_data: [],
			imgBaseUrl,
		}
	},
	watch: {
		'$route' (to, from) {
			// 对路由变化作出响应...
			this.getResData();
		}
	},
	computed: {
		...mapState([
			'userInfo',
			'login'
		]),
	},
	mounted(){
		this.getResData();
	},
	methods: {
		...mapMutations([
			'DIALOG_LOGIN',
		]),
	
		// 收藏 
		storeFn(item,videoCard){
			if(this.login){
				let para = {
					aid: videoCard.aid,
					user_id: this.userInfo.user_id,
				}
				storefrontAdd(para).then(res=> {
					let index = this.res_data.indexOf(item)
					if(res.data){
						if (index !== -1) {
							let index_card = item.indexOf(videoCard);
							if(index_card !== -1){
								this.res_data[index][index_card].storeClass = 'icon-bg icon-store';
								this.res_data[index][index_card].store_num++;
							}
						}
					}else{
						if(res.tologin){
							this.DIALOG_LOGIN();
						}else {
							if(res.msg === '已经收藏过此视频'){
								this.res_data[index][index_card].storeClass = 'icon-bg icon-store';
							}
							this.$message.warning(res.msg);
						}
					}
				})
			}else{
				this.DIALOG_LOGIN();
			}
		},
		// 点赞 
		goodFn(item,videoCard){
			if(videoCard.goodcan){
				let para = {
					aid: videoCard.aid
				}
				updategood(para).then(res=> {
					if(res.data){
						let index = this.res_data.indexOf(item);
						if (index !== -1) {
							let index_card = item.indexOf(videoCard);
							if(index_card !== -1){
								this.res_data[index][index_card].good = 'icon-bg icon-good';
								this.res_data[index][index_card].good_num++;
								this.res_data[index][index_card].goodcan = false;
							}
						}
					}else{
						this.$message.warning(res.msg);
					}
				})
			}
		},
		// 加载页面数据
		getResData(){
			this.menu_id = this.$route.params.menu_id;
			let para = {
				menu_id: this.menu_id,
				user_id: this.userInfo?this.userInfo.user_id:'',
			};
			getmenuhotvideo(para).then(res => {
				if(res.data){
					let data = res.data;
					var result = [];
					for(let i =0;i<data.length; i++){
						data[i].storeClass = data[i].store!=1?'icon-bg icon-store-o':'icon-bg icon-store';'icon-bg icon-store-o';
						data[i].good = 'icon-bg icon-good-o';
						data[i].goodcan = true;
					}
					for(var i=0,len=data.length;i<len;i+=3){
						result.push(data.slice(i,i+3));
					}
					this.res_data = result;
				}else{
					this.$message.warning(res.msg);
				}
			})
		},
		
	},
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>

</style>
